今日文章目錄

• 應用情境
• 事前準備
• CSS 說明
• 參考資料

應用情境

• 針對重複性的資料流中，指定其中幾項做個別設定有幾個方法：
  • 多組class命名：class= "共用設定 個別設定"
  • :nth-child():CSS指定同層第幾個，也就是今天要練習的部分。
  • 練習範例：在手機版統一文上圖下，電腦版則水平交錯排列。

參考圖片來源

事前準備

• HTML架構：.intro > .container > .introList > .introItem
• 可以注意到：這裡的 .introItem都是是重複性的結構，圖文交錯是等等CSS排出來的，這樣可以確保手機版排列統一性之外，結構易讀性跟維護也比較容易。

<section class="intro">
  <div class="container">
    <ul class="introList">
      <li class="introItem">
        <img src="https://picsum.photos/400/300?random=1" alt="圖文1">
        <div class="txt">
          <h3 class="subTitle">在電視上觀賞。</h3>
          <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam minus possimus doloremque? Ipsa iste, laboriosam numquam accusamus error tenetur recusandae, itaque modi ullam placeat aperiam. Assumenda facere aspernatur earum quis!
          </p>
        </div>
      </li>
      <li class="introItem">
        <img src="https://picsum.photos/400/300?random=2" alt="圖文2">
        <div class="txt">
          <h3 class="subTitle">下載您的節目以便離線觀賞。</h3>
          <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam minus possimus doloremque? Ipsa iste, laboriosam numquam accusamus error tenetur recusandae, itaque modi ullam placeat aperiam. Assumenda facere aspernatur earum quis!
          </p>
        </div>
      </li>
      <li class="introItem">
        <img src="https://picsum.photos/400/300?random=3" alt="圖文3">
        <div class="txt">
          <h3 class="subTitle">隨處都能觀賞。</h3>
          <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam minus possimus doloremque? Ipsa iste, laboriosam numquam accusamus error tenetur recusandae, itaque modi ullam placeat aperiam. Assumenda facere aspernatur earum quis!
          </p>
        </div>
      </li>
    </ul>
  </div>
</section>

CSS 說明

• 先上 codepen 練習範例：https://codepen.io/chen-chens/pen/zYzNLjp?editors=1000
• 這裡我嘗試用了兩種方法達到圖文交錯的效果：

1. 第一種：inline-block + direction
   • 利用 inline-block 特性讓圖img(inline)文div(block) 在手機上垂直排列(width: 100%)，在電腦版水平排排站(圖width:40% 文 width: 60%)。
   • 搭配 direction:針對 inline 物件的排列方向做 rtl(right to left) 與 ltr( left to right) 調整，即可完成圖文交錯效果。

2. 第二種：flex + row-reverse
   • 利用 flex+ flex-wrap 特性讓子層(圖、文)在手機上垂直排列(flex-direction: column)，在電腦版水平排排站(flex-direction: row)。
   • 搭配 row-reverse 針對偶數列做排列反轉，即可完成圖文交錯效果。

參考資料

https://www.youtube.com/watch?v=aN7zFs_AT8s&t=1058s

明日預告：頁籤